<template>
  <!-- 骨架屏 -->
  <el-skeleton style="width: 100%" :loading="loading" animated :throttle="200">
    <!-- 显示为首页时 -->
    <template v-if="myType === 'Personalization'" slot="template">
      <el-skeleton-item variant="image" />
      <h3>歌单推荐</h3>
      <div class="skeleton-container">
        <div class="skeleton-item">
          <el-skeleton-item variant="image" />
          <el-skeleton-item variant="h3" />
        </div>
        <div class="skeleton-item">
          <el-skeleton-item variant="image" />
          <el-skeleton-item variant="h3" />
        </div>
        <div class="skeleton-item">
          <el-skeleton-item variant="image" />
          <el-skeleton-item variant="h3" />
        </div>
      </div>
      <h3>最新音乐</h3>
      <div class="skeleton-container">
        <div class="skeleton-item">
          <el-skeleton-item variant="image" />
          <el-skeleton-item variant="h3" />
        </div>
        <div class="skeleton-item">
          <el-skeleton-item variant="image" />
          <el-skeleton-item variant="h3" />
        </div>
        <div class="skeleton-item">
          <el-skeleton-item variant="image" />
          <el-skeleton-item variant="h3" />
        </div>
      </div>
    </template>
    <!-- 显示为列表数据时 -->
    <template v-if="myType === 'list'" slot="template">
      <div class="skeleton-container">
        <div class="skeleton-item">
          <el-skeleton-item variant="image" />
          <el-skeleton-item variant="h3" />
        </div>
        <div class="skeleton-item">
          <el-skeleton-item variant="image" />
          <el-skeleton-item variant="h3" />
        </div>
        <div class="skeleton-item">
          <el-skeleton-item variant="image" />
          <el-skeleton-item variant="h3" />
        </div>
      </div>
    </template>
    <!-- 显示为搜索数据时 -->
    <template v-if="myType === 'search'" slot="template">
      <div class="serach-box">
        <el-skeleton :rows="6" />
      </div>
    </template>
    <!-- 稍后显示的数据 -->
    <template>
      <slot></slot>
    </template>
  </el-skeleton>
</template>

<script>
export default {
  name: 'Skeleton',
  props: {
    myType: {
      tyep: String,
      default: 'Personalization'
    },
    loading: {
      tyep: Boolean,
      default: true
    }
  }
}
</script>

<style lang="less" scoped>
.serach-box {
  margin-top: 50px;
}
</style>
